<template>
  <div class="gdmap-container">
    <div>llt1</div>
    <div id="container"></div>
  </div>
</template>

<script setup>
import AMapLoader from "@amap/amap-jsapi-loader";
import { onMounted, onUnmounted, ref } from "vue";
const positionInput = ref("");

function initMap() {
  window._AMapSecurityConfig = {
    securityJsCode: "2a1f187554ebbc849261ca0f20498f82", // 密钥
  }; // 重要！
  AMapLoader.load({
    key: "20ed93694ff0102a56156c92c5049b38", // 申请好的Web端开发者Key，首次调用 load 时必填
    version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: ["AMap.AutoComplete", "AMap.PlaceSearch"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
  }).then((AMap) => {
    var map = new AMap.Map("container", {
      resizeEnable: true,
      viewMode: "3D", // 是否为3D地图模式
      zoom: 8, // 初始化地图级别
      center: [118, 30], // 初始化地图中心点位置
    });
    var autoOptions = {
      input: "searchInputId",
    };
    var auto = new AMap.AutoComplete(autoOptions);
    var placeSearch = new AMap.PlaceSearch({
      map: map,
    });
    auto.on("select", select);
    function select(e) {
      placeSearch.setCity(e.poi.adcode);
      placeSearch.search(e.poi.name); //关键字查询查询
    }
    map.plugin('AMap.Geolocation', function () {
   const geolocation = new AMap.Geolocation({
        enableHighAccuracy: true,//是否使用高精度定位，默认:true
        timeout: 10000,          //超过10秒后停止定位，默认：无穷大
        maximumAge: 0,           //定位结果缓存0毫秒，默认：0
        convert: true,           //自动偏移坐标，偏移后的坐标为高德坐标，默认：true
        showButton: true,        //显示定位按钮，默认：true
        buttonPosition: 'LB',    //定位按钮停靠位置，默认：'LB'，左下角
        buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
        showMarker: true,        //定位成功后在定位到的位置显示点标记，默认：true
        showCircle: true,        //定位成功后用圆圈表示定位精度范围，默认：true
        panToLocation: true,     //定位成功后将定位到的位置作为地图中心点，默认：true
        zoomToAccuracy:true      //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
    });
    map.addControl(geolocation);
    geolocation.getCurrentPosition();
    AMap.event.addListener(geolocation, 'complete', onComplete);//返回定位信息
    AMap.event.addListener(geolocation, 'error', onError);      //返回定位出错信息
});
  });
}

onMounted(() => {
  console.log("onmounted");
  initMap();
});
onUnmounted(() => {
  map?.destroy();
});
</script>

<style  scoped>
.gdmap-container {
  width: 500px;
  height: 300px;
}
#container {
  padding: 0px;
  margin: 0px;
  border: 1px solid gray;
  width: 100%;
  height: 100%;
}
</style>